<template>
    <div class="header">
        <h1>任务列表</h1>
        <div class="search">
            <input type="text" v-model.lazy.trim="text">
            <!-- <input type="text" v-model="keywords" @keyup.enter="emit('search', keywords)"> -->
            <button @click="onReset">重置</button>
        </div>
        <div class="add">
            <input type="text" v-model.trim="title" @keyup.enter="onAdd">
            <button @click="onAdd">添加</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// // 定义变量，和搜索输入框双向绑定，获取用户搜索的值
// let keywords = ref('')
// // 获取emit函数
// const emit = defineEmits(['search'])
// // 重置方法
// const onReset = () => {
//     emit('search', '')
// }

let text = defineModel()
// 重置方法
const onReset = () => {
    text.value = ''
}
// 接收App.vue传递过来的添加方法
const props = defineProps(['add'])

// 定义变量，和添加文本框双向绑定，来获取用户输入的内容
let title = ref('')
// 用户点击添加按钮时调用该方法
const onAdd = () => {
    // 如果文本框为空，不添加
    if (title.value === '') return
    // 处理要添加的数组元素（对象）{ id: 1, title: '晨会', createtime: 1761619193094, important: true, isdel: false, isdone: true },
    let obj = { id: Date.now(), title: title.value, createtime: Date.now(), important: false, isdel: false, isdone: false }
    // 调用add方法实现添加
    props.add(obj)
    // 清空文本框
    title.value = ''
}
</script>

<style scoped>
.header {
    padding: 20px;
    border-bottom: 1px solid gainsboro;
}

.header h1 {
    text-align: center;
}

.search,
.add {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.search button,
.add button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: #42b882;
    color: #fff;
}

.search input,
.add input {
    flex: 1;
    margin-right: 10px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    outline: none;
    padding: 0 10px;
}
</style>